<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <title>员工管理系统</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/all.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<nav class="navbar navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="#">员工管理系统</a>
    </div>
</nav>

<div class="container mt-4">
    <div class="card shadow-sm">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="card-title mb-0">员工列表</h5>
                <button class="btn btn-primary" data-target="#employeeModal" data-toggle="modal" type="button">
                    <i class="fas fa-plus"></i> 新增员工
                </button>
            </div>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="thead-light">
                    <tr>
                        <th>ID</th>
                        <th>头像</th>
                        <th>姓名</th>
                        <th>部门</th>
                        <th>职位</th>
                        <th>入职日期</th>
                        <th>联系电话</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr id="employeeTableBody">
                        <!--                        <td>1</td>-->
                        <!--                        <td>张三</td>-->
                        <!--                        <td>技术部</td>-->
                        <!--                        <td>开发工程师</td>-->
                        <!--                        <td>2023-01-01</td>-->
                        <!--                        <td>13800138000</td>-->
                        <!--                        <td>-->
                        <!--                            <button class="btn btn-sm btn-info mr-1" data-target="#employeeModal" data-toggle="modal">-->
                        <!--                                <i class="fas fa-edit"></i>-->
                        <!--                            </button>-->
                        <!--                            <button class="btn btn-sm btn-danger">-->
                        <!--                                <i class="fas fa-trash-alt"></i>-->
                        <!--                            </button>-->
                        <!--                        </td>-->
                    </tr>
                    </tbody>
                </table>
            </div>
            <nav aria-label="分页导航">
                <div id="pageNav"></div>
                <!--                <ul class="pagination justify-content-center mb-0">-->
                <!--                    <li class="page-item disabled">-->
                <!--                        <a class="page-link" href="#" tabindex="-1">上一页</a>-->
                <!--                    </li>-->
                <!--                    <li class="page-item active"><a class="page-link" href="#">1</a></li>-->
                <!--                    <li class="page-item"><a class="page-link" href="#">2</a></li>-->
                <!--                    <li class="page-item"><a class="page-link" href="#">3</a></li>-->
                <!--                    <li class="page-item">-->
                <!--                        <a class="page-link" href="#">下一页</a>-->
                <!--                    </li>-->
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- 员工信息模态框 -->
<div aria-hidden="true" aria-labelledby="employeeModalLabel" class="modal fade" id="employeeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="employeeModalLabel">员工信息</h5>
                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="employeeForm">
                    <input type="hidden" id="employeeId" name="employeeId">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input class="form-control" id="name" required type="text">
                    </div>
                    <div class="form-group">
                        <label for="department">部门</label>
                        <select class="form-control" id="department" required>
                            <option value="">请选择部门</option>
                            <option value="技术部">技术部</option>
                            <option value="人事部">产品部</option>
                            <option value="市场部">人力资源部</option>
                            <option value="人事部">财务部</option>
                            <option value="市场部">市场部</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="position">职位</label>
                        <input class="form-control" id="position" required type="text">
                    </div>
                    <div class="form-group">
                        <label for="hireDate">入职日期</label>
                        <input class="form-control" id="hireDate" required type="date">
                    </div>
                    <div class="form-group">
                        <label for="phone">联系电话</label>
                        <input class="form-control" id="phone" required type="tel">
                    </div>
                    <div class="form-group">
                        <label for="photo">照片上传</label>
                        <div class="custom-file">
                            <input accept="image/*" class="custom-file-input" id="photo" type="file">
                            <label class="custom-file-label" for="photo">选择文件</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal" type="button">取消</button>
                <button class="btn btn-primary" form="employeeForm" type="submit" onclick="saveEmployee()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div aria-hidden="true" aria-labelledby="deleteModalLabel" class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                确定要删除这名员工的信息吗？此操作不可撤销。
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal" type="button">取消</button>
                <button class="btn btn-danger" type="button">确认删除</button>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-3.6.0.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/main.js"></script>
<script>
    $(function () {
        showPage(1);
    })

    function showPage(PageNum) {
        $.ajax({
            url: 'http://localhost:8081/empsys_war/employee',
            type: 'GET',
            data:
                {
                    method: 'list',
                    pageNum: PageNum,
                    empName: $('#searchEmpName').val()
                },
            dataType: 'json',
            success: function (data) {
                console.log(data);
                $('#employeeTableBody').empty();
                for (const employee of data.data) {
                    if (employee.imgUrl == null) {
                        employee.imgUrl = "../img/d603755abc4b09031a029c78fb5b6ff0.jpg";
                    }
                    let tr = `<tr>
                      <td>` + employee.id + `</td>
                      <td><img src="` + employee.imgUrl + `" alt="员工头像" class="img-fluid"></td>
                      <td>` + employee.empName + `</td>
                      <td>` + employee.deptName + `</td>
                      <td>` + employee.position + `</td>
                      <td>` + employee.startDate + `</td>
                      <td>` + employee.phone + `</td>
                      <td>
                          <button class="btn btn-info mr-1" onclick="getEmployeeById(` + employee.id + `)">
                                  <i class="fas fa-edit">修改</i>
                          </button>
                          <button class="btn btn-sm btn-danger"  onclick="det(` + employee.id + `)">
                                  <i class="fas fa-trash-alt">删除</i>
                          </button>
                      </td>
                      </tr>`
                    $('#employeeTableBody').append(tr)
                }
                $('#pageNav').empty()
                let pageup;
                if (data.pageNum == 1) {
                    pageup = `<button class="page-link" href="#" tabindex="-1">上一页</button>`;
                } else {
                    pageup =
                        `<button class="page-link" tabindex="-1" onclick='onpage(` + (data.pageNum - 1) + `)'>上一页</button>`;
                }
                $('#pageNav').append(pageup);
                for (let i = 1; i <= data.totalPage; i++) {
                    let pageitem;
                    if (i == data.pageNum) {
                        pageitem =
                            `<button class="page-link" onclick='onpage(` + i + `)'>` + i + `</button>`;
                    } else {
                        pageitem =
                            ` <button class="page-link" onclick='onpage(` + i + `)'>` + i + `</button>`;
                    }
                    $('#pageNav').append(pageitem);
                }
                    let pagedown;
                    if (data.pageNum == data.totalPage) {
                        pagedown =
                            `<button class="page-link" href="#" tabindex="-1">下一页</button>`;
                    } else {
                        pagedown =
                            `<button class="page-link" href="#" tabindex="-1"
                                            onclick='onpage(` + (data.pageNum + 1) + `)'>下一页
                                    </button>`;
                    }
                    $('#pageNav').append(pagedown);
                }

            });
    }
        function det(id){
            $.ajax({
                url: 'http://localhost:8081/empsys_war/employee',
                type: 'GET',
                data: {
                    method: 'det',
                    id: id
                },
                dataType: 'text',
                success: function(data) {
                    if(data === "success") {
                        alert('删除成功');
                        // 刷新当前页面的员工列表
                        showPage(1);
                    } else {
                        alert('删除失败');
                    }
                },
                error: function() {
                    alert('删除操作出错，请稍后重试');
                }
            });
        }
        function onpage(pageNum) {
            showPage(pageNum);
        }
    function getEmployeeById(id) {
            $.ajax({
                url: 'http://localhost:8081/empsys_war/employee',
                type: 'GET',
                data: {
                    method: 'edit',
                    id: id
                },
                dataType: 'json',
                success: function(data) {
                    // 设置员工ID
                    $('#employeeId').val(data.id);
                    $('#name').val(data.empName);

                    // 根据部门ID设置部门选择
                    let departmentValue = '';
                    switch(data.depId) {
                        case 1: departmentValue = '技术部'; break;
                        case 2: departmentValue = '产品部'; break;
                        case 3: departmentValue = '人力资源部'; break;
                        case 4: departmentValue = '财务部'; break;
                        case 5: departmentValue = '市场部'; break;
                    }
                    $('#department').val(departmentValue);
                    $('#position').val(data.position);
                    $('#hireDate').val(data.startDate.split(' ')[0]); // 只取日期部分
                    $('#phone').val(data.phone);
                    // 显示模态框
                    $('#employeeModal').modal('show');
                    // 修改模态框标题
                    $('#employeeModalLabel').text('修改员工信息');
                }
            });
    }
    function saveEmployee() {
        const formData = new FormData();
        const employeeId = $('#employeeId').val();
        // 判断是添加还是修改
        const method = employeeId ? "update" : "add";
        formData.append("method", method);
        if(employeeId) {
            formData.append("id", employeeId);
        }
        formData.append("empName", $('#name').val());

        // 部门ID转换
        let departmentId;
        switch($('#department').val()) {
            case "技术部": departmentId = 1; break;
            case "产品部": departmentId = 2; break;
            case "人力资源部": departmentId = 3; break;
            case "财务部": departmentId = 4; break;
            case "市场部": departmentId = 5; break;
            default: departmentId = 1;
        }
        formData.append("departmentId", departmentId);
        formData.append("position", $('#position').val());
        formData.append("hireDate", $('#hireDate').val());
        formData.append("phone", $('#phone').val());
        $.ajax({
            url: "http://localhost:8081/empsys_war/employee",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
                if(data === "success") {
                    alert(employeeId ? "修改成功" : "添加成功");
                    $('#employeeModal').modal('hide');
                    // 重置并隐藏模态框
                    resetAndHideModal();
                    // 刷新列表
                    showPage(1);
                } else {
                    alert(employeeId ? "修改失败" : "添加失败");
                }
            },
            error: function(error) {
                console.error("操作失败:", error);
                alert(employeeId ? "修改失败" : "添加失败");
            }
        });
    }
    // 重置并隐藏模态框的函数
    function resetAndHideModal() {
        // 重置表单
        $('#employeeForm')[0].reset();
        // 清除隐藏的员工ID
        $('#employeeId').val('');
        // 重置文件上传标签
        $('.custom-file-label').text('选择文件');
        // 将标题重置为"添加员工信息"  <-- 这是新增的关键修改
        $('#employeeModalLabel').text('添加员工信息');
        // 隐藏模态框
        $('#employeeModal').modal('hide');
        // 移除可能的验证错误样式
        $('.is-invalid').removeClass('is-invalid');
    }
</script>
</body>
</html>